import Vue from 'vue'
//导入vuex 包
import Vuex from 'vuex'
Vue.use(Vuex)

//创建一个vuex的公共数据仓储  store仓储的意思 将store挂载到vue实例中
const store = new Vuex.Store({
    state: {//state 可以想象成组件中的data 是绑定数据的，调用的话 this.$store.state.****
        car: []
    },
    mutations: {//它可以想象成组件中的methods:{}方法 可以调用data里面的数据
        //调用的话 this.$store.commit('方法名',按需传递唯一的参数)
        addToCar(state, cars) {
            //点击加入购物车，把商品信息保存到store中的car上
            //分析
            //1.如果购物城中，之前已经有对应的商品了，值需要封信数量就好
            //2.如果没有，就需要直接把商品数据 push 到car中

            //假设在购物车中没有找到对应的商品
            var flag = false;
            //some方法只循环一次
            state.car.some(item => {
                if (item.id == cars.id) {
                    item.count += parseInt(cars.count)
                    flag = true
                    return true
                }
            })

            if (!flag) {
                state.car.push(cars)
            }

            //当更新car之后，把car数组 存储到 localStorage中
            localStorage.setItem('car', JSON.stringify(state.car))


        }
    },
    getters: {//调用：this.$store.getters.****

        getAllcount(state) {
            var c = 0;
            state.car.forEach(item => {
                c += item.count
            });
            return c;
        },
        getDoodsCount(state) {
            var num = {};
            state.car.forEach(item => {
                num[item.id] = item.count
            })

            return num

        }

    }
})
//导入app组件
import App from './App.vue'

//导入路由
import VueRouter from 'vue-router'
//vue安装路由
Vue.use(VueRouter)
//导入自己定义的路由模块
import router from './router.js'

//引入mint-ui插件
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)

//导入mui插件
// import Mui from 'mui'
// Vue.use(Mui)
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'

//按需导入mint-ui
// import { Button, Header } from 'mint-ui'
// Vue.component(Button.name, Button)
// Vue.component(Header.name, Header)


//导入vue-resource
import Resource from 'vue-resource'
//在vue中安装上
Vue.use(Resource)

//导入vue-preview插件
import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)



var vm = new Vue({
    el: "#app",
    data: {
        msg: "我是数据"
    },
    render: c => c(App),//render渲染会将原来的el的元素给覆盖掉 所以 组件都放到App.vue中渲染
    router,
    store   //将store挂载到vue实例中

})